<!DOCTYPE html>
<!-- Template Name: Clip-Two - Responsive Admin Template build with Twitter Bootstrap 3.x | Author: ClipTheme -->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>Clip-Two - Responsive Admin Template</title>
		<!-- start: META -->
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: GOOGLE FONTS -->
		<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
		<!-- end: GOOGLE FONTS -->
		<!-- start: MAIN CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap-rtl.min.css">
		<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="vendor/themify-icons/themify-icons.min.css">
		<link href="vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
		<link href="vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
		<link href="vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
		<!-- end: MAIN CSS -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<link href="vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.css" rel="stylesheet" media="screen">
		<link href="vendor/select2/select2.min.css" rel="stylesheet" media="screen">
		<link href="vendor/bootstrap-datepicker/bootstrap-datepicker3.standalone.min.css" rel="stylesheet" media="screen">
		<link href="vendor/bootstrap-timepicker/bootstrap-timepicker.min.css" rel="stylesheet" media="screen">
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
		<!-- start: CLIP-TWO CSS -->
		<link rel="stylesheet" href="assets/css/styles.css">
		<link rel="stylesheet" href="assets/css/plugins.css">
		<link rel="stylesheet" href="assets/css/themes/theme-1.css" id="skin_color" />
		<link rel="stylesheet" href="assets/css/rtl.css"/>
		<!-- end: CLIP-TWO CSS -->
	</head>
	<!-- end: HEAD -->
	<body>
		<div id="app">
			<!-- sidebar -->
			<div class="sidebar app-aside" id="sidebar">
				<div class="sidebar-container perfect-scrollbar">
					<nav>
						<!-- start: SEARCH FORM -->
						<div class="search-form">
							<a class="s-open" href="#">
								<i class="ti-search"></i>
							</a>
							<form class="navbar-form" role="search">
								<a class="s-remove" href="#" target=".navbar-form">
									<i class="ti-close"></i>
								</a>
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<button class="btn search-button" type="submit">
										<i class="ti-search"></i>
									</button>
								</div>
							</form>
						</div>
						<!-- end: SEARCH FORM -->
						<!-- start: MAIN NAVIGATION MENU -->
						<div class="navbar-title">
							<span>Main Navigation</span>
						</div>
						<ul class="main-navigation-menu">
							<li>
								<a href="index.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-home"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Dashboard </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-settings"></i>
										</div>
										<div class="item-inner">
											<span class="title"> UI Elements </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="ui_elements.html">
											<span class="title"> Elements </span>
										</a>
									</li>
									<li>
										<a href="ui_buttons.html">
											<span class="title"> Buttons </span>
										</a>
									</li>
									<li>
										<a href="ui_links.html">
											<span class="title"> Links </span>
										</a>
									</li>
									<li>
										<a href="ui_icons.html">
											<span class="title"> Font Awesome Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_line_icons.html">
											<span class="title"> Linear Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_modals.html">
											<span class="title"> Modals </span>
										</a>
									</li>
									<li>
										<a href="ui_toggle.html">
											<span class="title"> Toggle </span>
										</a>
									</li>
									<li>
										<a href="ui_tabs_accordions.html">
											<span class="title"> Tabs &amp; Accordions </span>
										</a>
									</li>
									<li>
										<a href="ui_panels.html">
											<span class="title"> Panels </span>
										</a>
									</li>
									<li>
										<a href="ui_notifications.html">
											<span class="title"> Notifications </span>
										</a>
									</li>
									<li>
										<a href="ui_treeview.html">
											<span class="title"> Treeview </span>
										</a>
									</li>
									<li>
										<a href="ui_media.html">
											<span class="title"> Media Object </span>
										</a>
									</li>
									<li>
										<a href="ui_nestable.html">
											<span class="title"> Nestable List </span>
										</a>
									</li>
									<li>
										<a href="ui_typography.html">
											<span class="title"> Typography </span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layout-grid2"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Tables </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="table_basic.html">
											<span class="title">Basic Tables</span>
										</a>
									</li>
									<li>
										<a href="table_responsive.html">
											<span class="title">Responsive Tables</span>
										</a>
									</li>
									<li>
										<a href="table_data.html">
											<span class="title">Advanced Data Tables</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="active open">
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pencil-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Forms </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li class="active">
										<a href="form_elements.html">
											<span class="title">Form Elements</span>
										</a>
									</li>
									<li>
										<a href="form_text_editor.html">
											<span class="title">Text Editor</span>
										</a>
									</li>
									<li>
										<a href="form_wizard.html">
											<span class="title">Form Wizard</span>
										</a>
									</li>
									<li>
										<a href="form_validation.html">
											<span class="title">Form Validation</span>
										</a>
									</li>
									<li>
										<a href="form_image_cropping.html">
											<span class="title">Image Cropping</span>
										</a>
									</li>
									<li>
										<a href="form_multiple_upload.html">
											<span class="title">Multiple File Upload</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-user"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Login </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="login_signin.html">
											<span class="title"> Login Form </span>
										</a>
									</li>
									<li>
										<a href="login_registration.html">
											<span class="title"> Registration Form </span>
										</a>
									</li>
									<li>
										<a href="login_forgot.html">
											<span class="title"> Forgot Password Form </span>
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											<span class="title">Lock Screen</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layers-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Pages </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="pages_user_profile.html">
											<span class="title">User Profile</span>
										</a>
									</li>
									<li>
										<a href="pages_invoice.html">
											<span class="title">Invoice</span>
										</a>
									</li>
									<li>
										<a href="pages_timeline.html">
											<span class="title">Timeline</span>
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											<span class="title">Calendar</span>
										</a>
									</li>
									<li>
										<a href="pages_messages.html">
											<span class="title">Messages</span>
										</a>
									</li>
									<li>
										<a href="pages_blank_page.html">
											<span class="title">Blank Page</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-package"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Utilities </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="utilities_search_result.html">
											<span class="title">Search Results</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_404.html">
											<span class="title">Error 404</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_500.html">
											<span class="title">Error 500</span>
										</a>
									</li>
									<li>
										<a href="utilities_pricing_table.html">
											<span class="title">Pricing Table</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-folder"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 3 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-menu-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 4 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="maps.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-location-pin"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Maps </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="charts.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pie-chart"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Charts </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: MAIN NAVIGATION MENU -->
						<!-- start: CORE FEATURES -->
						<div class="navbar-title">
							<span>Core Features</span>
						</div>
						<ul class="folders">
							<li>
								<a href="pages_calendar.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Calendar </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="pages_messages.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-folder-open-o fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Messages </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: CORE FEATURES -->
						<!-- start: DOCUMENTATION BUTTON -->
						<div class="wrapper">
							<a href="documentation.html" class="button-o">
								<i class="ti-help"></i>
								<span>Documentation</span>
							</a>
						</div>
						<!-- end: DOCUMENTATION BUTTON -->
					</nav>
				</div>
			</div>
			<!-- / sidebar -->
			<div class="app-content">
				<!-- start: TOP NAVBAR -->
				<header class="navbar navbar-default navbar-static-top">
					<!-- start: NAVBAR HEADER -->
					<div class="navbar-header">
						<a href="#" class="sidebar-mobile-toggler pull-right hidden-md hidden-lg" class="btn btn-navbar sidebar-toggle" data-toggle-class="app-slide-off" data-toggle-target="#app" data-toggle-click-outside="#sidebar">
							<i class="ti-align-justify"></i>
						</a>
						<a class="navbar-brand" href="#">
							<img src="assets/images/logo.png" alt="Clip-Two"/>
						</a>
						<a href="#" class="sidebar-toggler pull-left visible-md visible-lg" data-toggle-class="app-sidebar-closed" data-toggle-target="#app">
							<i class="ti-align-justify"></i>
						</a>
						<a class="pull-left menu-toggler visible-xs-block" id="menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<span class="sr-only">Toggle navigation</span>
							<i class="ti-view-grid"></i>
						</a>
					</div>
					<!-- end: NAVBAR HEADER -->
					<!-- start: NAVBAR COLLAPSE -->
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-right">
							<!-- start: MESSAGES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<span class="dot-badge partition-red"></span> <i class="ti-comment"></i> <span>MESSAGES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> Unread messages</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<ul>
												<li class="unread">
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-2.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Nicole Bell</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time"> Just Now</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-3.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Steven Thompson</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">8 hrs</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-5.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Kenneth Ross</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">14 hrs</span>
															</div>
														</div>
													</a>
												</li>
											</ul>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: MESSAGES DROPDOWN -->
							<!-- start: ACTIVITIES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-check-box"></i> <span>ACTIVITIES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> You have new notifications</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<div class="list-group no-margin">
												<a class="media list-group-item" href="">
													<img class="img-circle" alt="..." src="assets/images/avatar-1.jpg">
													<span class="media-body block no-margin"> Use awesome animate.css <small class="block text-grey">10 minutes ago</small> </span>
												</a>
												<a class="media list-group-item" href="">
													<span class="media-body block no-margin"> 1.0 initial released <small class="block text-grey">1 hour ago</small> </span>
												</a>
											</div>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: ACTIVITIES DROPDOWN -->
							<!-- start: LANGUAGE SWITCHER -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-world"></i> English
								</a>
								<ul role="menu" class="dropdown-menu dropdown-light fadeInUpShort">
									<li>
										<a href="#" class="menu-toggler">
											Deutsch
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											English
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											Italiano
										</a>
									</li>
								</ul>
							</li>
							<!-- start: LANGUAGE SWITCHER -->
							<!-- start: USER OPTIONS DROPDOWN -->
							<li class="dropdown current-user">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<img src="assets/images/avatar-1.jpg" alt="Peter"> <span class="username">Peter <i class="ti-angle-down"></i></i></span>
								</a>
								<ul class="dropdown-menu dropdown-dark">
									<li>
										<a href="pages_user_profile.html">
											My Profile
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											My Calendar
										</a>
									</li>
									<li>
										<a hef="pages_messages.html">
											My Messages (3)
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											Lock Screen
										</a>
									</li>
									<li>
										<a href="login_signin.html">
											Log Out
										</a>
									</li>
								</ul>
							</li>
							<!-- end: USER OPTIONS DROPDOWN -->
						</ul>
						<!-- start: MENU TOGGLER FOR MOBILE DEVICES -->
						<div class="close-handle visible-xs-block menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<div class="arrow-left"></div>
							<div class="arrow-right"></div>
						</div>
						<!-- end: MENU TOGGLER FOR MOBILE DEVICES -->
					</div>
					<a class="dropdown-off-sidebar" data-toggle-class="app-offsidebar-open" data-toggle-target="#app" data-toggle-click-outside="#off-sidebar">
						&nbsp;
					</a>
					<!-- end: NAVBAR COLLAPSE -->
				</header>
				<!-- end: TOP NAVBAR -->
				<div class="main-content" >
					<div class="wrap-content container" id="container">
						<!-- start: PAGE TITLE -->
						<section id="page-title">
							<div class="row">
								<div class="col-sm-8">
									<h1 class="mainTitle">Form Elements</h1>
									<span class="mainDescription">We set out to create an easy, powerful and versatile form layout system. A combination of form styles and the Bootstrap grid means you can do almost anything.</span>
								</div>
								<ol class="breadcrumb">
									<li>
										<span>Forms</span>
									</li>
									<li class="active">
										<span>Form Elements</span>
									</li>
								</ol>
							</div>
						</section>
						<!-- end: PAGE TITLE -->
						<!-- start: BASIC EXAMPLE -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Basic <span class="text-bold">example</span></h5>
									<p>
										Individual form controls automatically receive some global styling.
									</p>
									<div class="row margin-top-30">
										<div class="col-lg-6 col-md-12">
											<div class="panel panel-white">
												<div class="panel-heading">
													<h5 class="panel-title">Default Form</h5>
												</div>
												<div class="panel-body">
													<p class="text-small margin-bottom-20">
														All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements with <code>.form-control</code> are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.
													</p>
													<form role="form">
														<div class="form-group">
															<label for="exampleInputEmail1">
																Email address
															</label>
															<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
														</div>
														<div class="form-group">
															<label for="exampleInputPassword1">
																Password
															</label>
															<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
														</div>
														<div class="checkbox clip-check check-primary">
															<input type="checkbox" id="checkbox1" value="1">
															<label for="checkbox1">
																Remember me
															</label>
														</div>
														<button type="submit" class="btn btn-o btn-primary">
															Submit
														</button>
													</form>
												</div>
											</div>
										</div>
										<div class="col-lg-6 col-md-12">
											<div class="panel panel-white">
												<div class="panel-heading">
													<h5 class="panel-title">Horizontal form</h5>
												</div>
												<div class="panel-body">
													<p class="text-small margin-bottom-20">
														Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.
													</p>
													<form role="form" class="form-horizontal">
														<div class="form-group">
															<label class="col-sm-2 control-label" for="inputEmail3">
																Email
															</label>
															<div class="col-sm-10">
																<input type="email" placeholder="Email" id="inputEmail3" class="form-control">
															</div>
														</div>
														<div class="form-group">
															<label class="col-sm-2 control-label" for="inputPassword3">
																Password
															</label>
															<div class="col-sm-10">
																<input type="password" placeholder="Password" id="inputPassword3" class="form-control">
															</div>
														</div>
														<div class="form-group">
															<div class="col-sm-offset-2 col-sm-10">
																<div class="checkbox clip-check check-primary">
																	<input type="checkbox" id="checkbox2" value="1">
																	<label for="checkbox2">
																		Remember me
																	</label>
																</div>
															</div>
														</div>
														<div class="form-group margin-bottom-0">
															<div class="col-sm-offset-2 col-sm-10">
																<button class="btn btn-o btn-primary" type="submit">
																	Sign in
																</button>
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
										<div class="col-lg-12 col-md-12">
											<div class="panel panel-white">
												<div class="panel-heading">
													<h5 class="panel-title">Inline form</h5>
												</div>
												<div class="panel-body">
													<p class="text-small margin-bottom-20">
														Add <code>.form-inline</code> to your <code>&lt;form&gt;</code> for left-aligned and inline-block controls.
													</p>
													<form role="form" class="form-inline">
														<div class="form-group">
															<div class="input-group">
																<div class="input-group-addon">
																	@
																</div>
																<input type="email" placeholder="Enter email" class="form-control">
															</div>
														</div>
														<div class="form-group">
															<label for="exampleInputPassword2" class="sr-only">
																Password
															</label>
															<input type="password" placeholder="Password" id="exampleInputPassword2" class="form-control">
														</div>
														<div class="form-group">
															<div class="checkbox clip-check check-primary">
																<input type="checkbox" id="checkbox3" value="1">
																<label for="checkbox3">
																	Remember me
																</label>
															</div>
														</div>
														<button class="btn btn-primary" type="submit">
															Sign in
														</button>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: BASIC EXAMPLE -->
						<!-- start: ALTERNATIVE EXAMPLE -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-6">
									<h5 class="over-title margin-bottom-15">Alternative <span class="text-bold">example</span></h5>
									<p>
										Show your text field as a line, adding the class <code>.underline</code>
									</p>
									<div class="panel panel-transparent">
										<div class="panel-heading">
											<h5 class="panel-title">Default Form</h5>
										</div>
										<div class="panel-body">
											<form role="form">
												<div class="form-group">
													<label for="exampleInputEmail1">
														Email address
													</label>
													<input type="email" class="form-control underline" id="exampleInputEmail1" placeholder="Enter email">
												</div>
												<div class="form-group">
													<label for="exampleInputPassword1">
														Password
													</label>
													<input type="password" class="form-control underline" id="exampleInputPassword1" placeholder="Password">
												</div>
											</form>
										</div>
									</div>
									<h5 class="margin-bottom-15"></h5>
									<div class="panel panel-transparent">
										<div class="panel-heading">
											<h5 class="panel-title">Horizontal Form</h5>
										</div>
										<div class="panel-body">
											<form role="form" class="form-horizontal">
												<div class="form-group">
													<label class="col-sm-2 control-label" for="inputEmail3">
														Email
													</label>
													<div class="col-sm-10">
														<input type="email" placeholder="Email" id="inputEmail3" class="form-control underline">
													</div>
												</div>
												<div class="form-group">
													<label class="col-sm-2 control-label" for="inputPassword3">
														Password
													</label>
													<div class="col-sm-10">
														<input type="password" placeholder="Password" id="inputPassword3" class="form-control underline">
													</div>
												</div>
											</form>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<h5 class="over-title margin-bottom-15">Control <span class="text-bold">sizing</span></h5>
									<p>
										Create taller or shorter form controls that match button sizes.
									</p>
									<div class="panel panel-white no-radius">
										<div class="panel-heading">
											<h5 class="panel-title">Default field sizing</h5>
										</div>
										<div class="panel-body">
											<form role="form" class="margin-bottom-20">
												<div class="form-group">
													<input type="text" placeholder="Large Text Field" id="form-field-12" class="form-control input-lg">
												</div>
												<div class="form-group">
													<input type="text" placeholder="Standard Text Field" id="form-field-13" class="form-control">
												</div>
												<div class="form-group">
													<input type="text" placeholder="Small Text Field" id="form-field-13" class="form-control input-sm">
												</div>
											</form>
										</div>
									</div>
									<div class="panel panel-white no-radius">
										<div class="panel-heading">
											<h5 class="panel-title">Alternative field sizing</h5>
										</div>
										<div class="panel-body">
											<form role="form">
												<div class="form-group">
													<input type="text" placeholder="Large Text Field" id="form-field-12" class="form-control underline input-lg">
												</div>
												<div class="form-group">
													<input type="text" placeholder="Standard Text Field" id="form-field-12" class="form-control underline">
												</div>
												<div class="form-group">
													<input type="text" placeholder="Small Text Field" id="form-field-13" class="form-control underline input-sm">
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: ALTERNATIVE EXAMPLE -->
						<!-- start: FIELDSET -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Defining a <span class="text-bold">Fieldset</span></h5>
									<p class="margin-bottom-30">
										<code>&lt;fieldset&gt;</code> is used as a wrapper right inside the form element. Right after you define a fieldset, you can include a legend title by using <code>&lt;legend&gt;</code>. Here's some HTML to help make copy paste.
									</p>
									<div class="row">
										<div class="col-md-6">
											<fieldset>
												<legend>
													Your Account
												</legend>
												<div class="form-group">
													<label>
														E-mail <span class="symbol required"></span>
													</label>
													<div class="form-group">
														<input type="email" placeholder="Text Field" name="email" id="email" class="form-control">
													</div>
												</div>
											</fieldset>
											<fieldset>
												<legend>
													Choose a password
												</legend>
												<div class="form-group">
													<label>
														Password
													</label>
													<input type="text" class="form-control" placeholder="Repeat Password">
												</div>
												<div class="form-group">
													<label>
														Repeat Password <span class="symbol required"></span>
													</label>
													<input type="email" placeholder="Text Field" name="email" id="email" class="form-control">
												</div>
											</fieldset>
										</div>
										<div class="col-md-6">
											<fieldset>
												<legend>
													Personal Information
												</legend>
												<div class="row">
													<div class="col-md-6">
														<div class="form-group">
															<label>
																First Name
															</label>
															<input type="text" name="firstName" class="form-control" placeholder="Enter your First Name">
														</div>
													</div>
													<div class="col-md-6">
														<div class="form-group">
															<label class="control-label">
																Last Name
															</label>
															<input type="text" name="lastName" class="form-control" placeholder="Enter your Last Name">
														</div>
													</div>
												</div>
												<div class="row">
													<div class="col-md-6">
														<div class="form-group">
															<label class="block">
																Gender
															</label>
															<div class="clip-radio radio-primary">
																<input type="radio" id="female" name="gender" value="female">
																<label for="female">
																	Female
																</label>
																<input type="radio" id="male" name="gender" value="male" checked="checked">
																<label for="male">
																	Male
																</label>
															</div>
														</div>
													</div>
													<div class="col-md-6">
														<div class="form-group">
															<label>
																Choose your country or region
															</label>
															<select name="country" class="form-control">
																<option value="">&nbsp;</option>
																<option value="AL">Alabama</option>
																<option value="AK">Alaska</option>
																<option value="AZ">Arizona</option>
																<option value="AR">Arkansas</option>
																<option value="CA">California</option>
																<option value="CO">Colorado</option>
																<option value="CT">Connecticut</option>
																<option value="DE">Delaware</option>
																<option value="FL">Florida</option>
																<option value="GA">Georgia</option>
																<option value="HI">Hawaii</option>
																<option value="ID">Idaho</option>
																<option value="IL">Illinois</option>
																<option value="IN">Indiana</option>
																<option value="IA">Iowa</option>
																<option value="KS">Kansas</option>
																<option value="KY">Kentucky</option>
																<option value="LA">Louisiana</option>
																<option value="ME">Maine</option>
																<option value="MD">Maryland</option>
																<option value="MA">Massachusetts</option>
																<option value="MI">Michigan</option>
																<option value="MN">Minnesota</option>
																<option value="MS">Mississippi</option>
																<option value="MO">Missouri</option>
																<option value="MT">Montana</option>
																<option value="NE">Nebraska</option>
																<option value="NV">Nevada</option>
																<option value="NH">New Hampshire</option>
																<option value="NJ">New Jersey</option>
																<option value="NM">New Mexico</option>
																<option value="NY">New York</option>
																<option value="NC">North Carolina</option>
																<option value="ND">North Dakota</option>
																<option value="OH">Ohio</option>
																<option value="OK">Oklahoma</option>
																<option value="OR">Oregon</option>
																<option value="PA">Pennsylvania</option>
																<option value="RI">Rhode Island</option>
																<option value="SC">South Carolina</option>
																<option value="SD">South Dakota</option>
																<option value="TN">Tennessee</option>
																<option value="TX">Texas</option>
																<option value="UT">Utah</option>
																<option value="VT">Vermont</option>
																<option value="VA">Virginia</option>
																<option value="WA">Washington</option>
																<option value="WV">West Virginia</option>
																<option value="WI">Wisconsin</option>
																<option value="WY">Wyoming</option>
															</select>
														</div>
													</div>
												</div>
											</fieldset>
											<fieldset>
												<legend>
													Terms &amp; Condition
												</legend>
												<div class="row">
													<div class="col-md-12">
														<div class="form-group">
															<label class="checkbox-inline clip-check">
																<input type="checkbox" name="newsletter">
																<i></i>
																I read and accept the terms and conditions
															</label>
														</div>
													</div>
												</div>
											</fieldset>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: FIELDSET -->
						<!-- start: INPUT OPTIONS -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Input <span class="text-bold">Options</span></h5>
									<div class="row">
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Disabled State
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Add the <code>disabled</code> boolean attribute on an input to prevent user input.
													</p>
													<div class="form-group">
														<label>
															Disabled Input
														</label>
														<input type="text" placeholder="Disabled" id="form-field-21" class="form-control" disabled="disabled">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Readonly State
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Add the <code>readonly</code> boolean attribute on an input to prevent user input.
													</p>
													<div class="form-group">
														<label>
															Readonly Input
														</label>
														<input type="text" placeholder="Readonly" value="Readonly value" id="form-field-21" class="form-control" readonly>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Required Label
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														An asterisk indicates to the user that the field is required.
													</p>
													<div class="form-group">
														<label>
															Required Input <span class="symbol required"></span>
														</label>
														<input type="text" placeholder="Required" class="form-control">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Success State
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Includes validation styles for success states on form controls.
													</p>
													<div class="form-group has-success">
														<label>
															Success Label <span class="symbol required"></span>
														</label>
														<input type="text" placeholder="Required" class="form-control">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Warning State
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Includes validation styles for warning states on form controls.
													</p>
													<div class="form-group has-warning">
														<label>
															Warning Label <span class="symbol required"></span>
														</label>
														<input type="text" placeholder="Required" class="form-control">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Error State
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Includes validation styles for error states on form controls.
													</p>
													<div class="form-group has-error">
														<label>
															Error Label <span class="symbol required"></span>
														</label>
														<input type="text" placeholder="Required" class="form-control">
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: INPUT OPTIONS -->
						<!-- start: ICONS AND HELPERS -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Icons &amp; <span class="text-bold">Helpers</span></h5>
									<div class="row">
										<div class="col-lg-7 col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-body">
													<form role="form">
														<div class="form-group">
															<label>
																Block Help
															</label>
															<input type="text" placeholder="Text Field" id="form-field-6" class="form-control">
															<span class="help-block"><i class="ti-info-alt text-primary"></i> A block of help text that breaks onto a new line and may extend beyond one line.</span>
														</div>
														<div class="form-group">
															<div class="row">
																<label class="col-sm-12">
																	Inline Help
																</label>
																<div class="col-md-8 col-sm-6">
																	<input type="text" placeholder="Text Field" id="form-field-7" class="form-control">
																</div>
																<span class="help-inline col-md-4 col-sm-6"> <i class="ti-info-alt text-primary"></i> Inline help text </span>
															</div>
														</div>
														<div class="form-group">
															<label>
																Tooltip
															</label>
															<input type="text" value="Click me!" tooltip="See? Now click away..."  tooltip-trigger="focus" tooltip-placement="top" class="form-control" />
														</div>
														<div class="form-group">
															<label>
																Popover
															</label>
															<input type="text" value="Click me!" popover-title="Title" popover-placement="top" popover="Hello, World!" class="form-control" />
														</div>
													</form>
												</div>
											</div>
										</div>
										<div class="col-lg-5 col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-body">
													<form role="form">
														<div class="form-group">
															<label>
																Input with Icon
															</label>
															<span class="input-icon">
																<input type="text" placeholder="Text Field" id="form-field-14" class="form-control">
																<i class="ti-user"></i> </span>
														</div>
														<div class="form-group">
															<label>
																Right Icon
															</label>
															<span class="input-icon input-icon-right">
																<input type="text" placeholder="Text Field" id="form-field-17" class="form-control">
																<i class="ti-twitter"></i> </span>
														</div>
														<div class="form-group">
															<label>
																Add-on
															</label>
															<div class="input-group">
																<span class="input-group-addon">@</span>
																<input type="text" placeholder="Username" class="form-control">
															</div>
														</div>
														<div class="form-group">
															<div class="input-group">
																<input type="text" class="form-control">
																<span class="input-group-addon">.00</span>
															</div>
														</div>
														<div class="form-group">
															<div class="input-group">
																<span class="input-group-addon">$</span>
																<input type="text" class="form-control">
																<span class="input-group-addon">.00</span>
															</div>
														</div>
													</form>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: ICONS AND HELPERS -->
						<!-- start: CHECKBOXES -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15"><span class="text-bold">Checkboxes</span></h5>
									<p>
										Checkboxes are for selecting one or several options in a list
									</p>
									<div class="row">
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Inline Checkbox</h5>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Use the <code>.checkbox-inline</code> classes on a series of checkboxes for controls that appear on the same line.
													</p>
													<div class="checkbox clip-check check-primary checkbox-inline">
														<input type="checkbox" id="checkbox4" value="1" checked="">
														<label for="checkbox4">
															Checkbox 1
														</label>
													</div>
													<div class="checkbox clip-check check-primary checkbox-inline">
														<input type="checkbox" id="checkbox5" value="1">
														<label for="checkbox5">
															Checkbox 2
														</label>
													</div>
												</div>
											</div>
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Default (stacked)</h5>
												</div>
												<div class="panel-body">
													<div class="checkbox clip-check check-primary">
														<input type="checkbox" id="checkbox6" value="1">
														<label for="checkbox6">
															Checkbox 1
														</label>
													</div>
													<div class="checkbox clip-check check-primary">
														<input type="checkbox" id="checkbox7" value="1">
														<label for="checkbox7">
															Checkbox 2
														</label>
													</div>
													<div class="checkbox clip-check check-primary">
														<input type="checkbox" id="checkbox8" value="1">
														<label for="checkbox8">
															Checkbox 3
														</label>
													</div>
													<div class="checkbox clip-check check-primary">
														<input type="checkbox" id="checkbox9" value="1" disabled="">
														<label for="checkbox9">
															Checkbox 4 (disabled)
														</label>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Various Colours</h5>
												</div>
												<div class="panel-body">
													<div class="checkbox clip-check check-primary checkbox-inline">
														<input type="checkbox" id="checkbox10" value="1" checked="">
														<label for="checkbox10">
															Checkbox 1
														</label>
													</div>
													<div class="checkbox clip-check check-success checkbox-inline">
														<input type="checkbox" id="checkbox11" value="1" checked="">
														<label for="checkbox11">
															Checkbox 2
														</label>
													</div>
													<div class="checkbox clip-check check-warning checkbox-inline">
														<input type="checkbox" id="checkbox12" value="1" checked="">
														<label for="checkbox12">
															Checkbox 3
														</label>
													</div>
													<div class="checkbox clip-check check-danger checkbox-inline">
														<input type="checkbox" id="checkbox13" value="1" checked="">
														<label for="checkbox13">
															Checkbox 4
														</label>
													</div>
													<div class="checkbox clip-check check-info checkbox-inline">
														<input type="checkbox" id="checkbox14" value="1" checked="">
														<label for="checkbox14">
															Checkbox 5
														</label>
													</div>
													<div class="checkbox clip-check check-purple checkbox-inline">
														<input type="checkbox" id="checkbox15" value="1" checked="">
														<label for="checkbox15">
															Checkbox 6
														</label>
													</div>
												</div>
											</div>
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Various Sizes</h5>
												</div>
												<div class="panel-body">
													<div class="checkbox clip-check check-primary checkbox-inline">
														<input type="checkbox" id="checkbox16" value="1">
														<label for="checkbox16">
															Checkbox 1
														</label>
													</div>
													<div class="checkbox clip-check check-primary check-md checkbox-inline">
														<input type="checkbox" id="checkbox17" value="1">
														<label for="checkbox17">
															Checkbox 1
														</label>
													</div>
													<div class="checkbox clip-check check-primary check-lg checkbox-inline">
														<input type="checkbox" id="checkbox18" value="1">
														<label for="checkbox18">
															Checkbox 3
														</label>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Switches</h5>
												</div>
												<div class="panel-body">
													<p>
														Turn checkboxes in toggle switches.
													</p>
													<div class="checkbox">
														<input type="checkbox" class="js-switch" checked />
													</div>
												</div>
											</div>
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Buttons</h5>
												</div>
												<div class="panel-body">
													<p>
														Turn checkboxes in buttons.
													</p>
													<div class="btn-group" data-toggle="buttons">
														<label class="btn btn-primary active">
															<input type="checkbox" autocomplete="off" checked>
															Left
														</label>
														<label class="btn btn-primary">
															<input type="checkbox" autocomplete="off">
															Middle
														</label>
														<label class="btn btn-primary">
															<input type="checkbox" autocomplete="off">
															Right
														</label>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: CHECKBOXES -->
						<!-- start: RADIO -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15"><span class="text-bold">Radio</span></h5>
									<p>
										Radios are for selecting one option from many.
									</p>
									<div class="row">
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Inline radio</h5>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Use the <code>.radio-inline</code> classes on a series of radios for controls that appear on the same line.
													</p>
													<div class="radio clip-radio radio-primary radio-inline">
														<input type="radio" id="radio1" name="inline" value="radio1">
														<label for="radio1">
															Radio 1
														</label>
													</div>
													<div class="radio clip-radio radio-primary radio-inline">
														<input type="radio" id="radio2" name="inline" value="radio2" checked="checked">
														<label for="radio2">
															Radio 2
														</label>
													</div>
												</div>
											</div>
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Vertical radio</h5>
												</div>
												<div class="panel-body">
													<div class="radio clip-radio radio-primary">
														<input type="radio" id="radio3" name="vertical" value="radio3">
														<label for="radio3">
															Radio 1
														</label>
													</div>
													<div class="radio clip-radio radio-primary">
														<input type="radio" id="radio4" name="vertical" value="radio4">
														<label for="radio4">
															Radio 2
														</label>
													</div>
													<div class="radio clip-radio radio-primary">
														<input type="radio" id="radio5" name="vertical" value="radio5">
														<label for="radio5">
															Radio 3
														</label>
													</div>
													<div class="radio clip-radio radio-primary">
														<input type="radio" id="radio6" name="vertical" value="radio6" disabled="">
														<label for="radio6">
															Radio 4 (disabled)
														</label>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Verious Colours</h5>
												</div>
												<div class="panel-body">
													<div class="radio clip-radio radio-primary radio-inline">
														<input type="radio" id="radio7" name="radio7" value="radio7" checked="checked">
														<label for="radio7">
															Radio 1
														</label>
													</div>
													<div class="radio clip-radio radio-success radio-inline">
														<input type="radio" id="radio8" name="radio8" value="radio8" checked="checked">
														<label for="radio8">
															Radio 2
														</label>
													</div>
													<div class="radio clip-radio radio-warning radio-inline">
														<input type="radio" id="radio9" name="radio9" value="radio9" checked="checked">
														<label for="radio9">
															Radio 3
														</label>
													</div>
													<div class="radio clip-radio radio-danger radio-inline">
														<input type="radio" id="radio10" name="radio10" value="radio10" checked="checked">
														<label for="radio10">
															Radio 4
														</label>
													</div>
													<div class="radio clip-radio radio-info radio-inline">
														<input type="radio" id="radio11" name="radio11" value="radio11" checked="checked">
														<label for="radio11">
															Radio 5
														</label>
													</div>
													<div class="radio clip-radio radio-purple radio-inline">
														<input type="radio" id="radio12" name="radio12" value="radio12" checked="checked">
														<label for="radio12">
															Radio 6
														</label>
													</div>
												</div>
											</div>
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Sized</h5>
												</div>
												<div class="panel-body">
													<div class="radio clip-radio radio-primary radio-inline">
														<input type="radio" id="radio13" name="radiosize" value="radio13">
														<label for="radio13">
															Radio 1
														</label>
													</div>
													<div class="radio clip-radio radio-primary radio-md radio-inline">
														<input type="radio" id="radio14" name="radiosize" value="radio14">
														<label for="radio14">
															Radio 2
														</label>
													</div>
													<div class="radio clip-radio radio-primary radio-lg radio-inline">
														<input type="radio" id="radio15" name="radiosize" value="radio15">
														<label for="radio15">
															Radio 3
														</label>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Buttons</h5>
												</div>
												<div class="panel-body">
													<p>
														Turn radio in buttons.
													</p>
													<div class="btn-group" data-toggle="buttons">
														<label class="btn btn-primary active">
															<input type="radio" name="options" id="option1" autocomplete="off" checked>
															Left
														</label>
														<label class="btn btn-primary">
															<input type="radio" name="options" id="option2" autocomplete="off">
															Middle
														</label>
														<label class="btn btn-primary">
															<input type="radio" name="options" id="option3" autocomplete="off">
															Right
														</label>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: RADIO -->
						<!-- start: MASKED INPUT -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Masked <span class="text-bold">Input</span></h5>
									<p class="margin-bottom-30">
										Masked Input allows users to enter the data in a certain format (dates, phone numbers, etc).
									</p>
									<div class="row">
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Date - 99/99/9999
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<label for="form-field-mask-1">
															Date <small class="text-success">99/99/9999</small>
														</label>
														<div class="input-group">
															<input type="text" id="form-field-mask-1" class="form-control input-mask-date">
															<span class="input-group-btn">
																<button type="button" class="btn btn-primary">
																	<i class="fa fa-calendar"></i>
																	Go!
																</button> </span>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Phone - (999) 999-9999
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<label for="form-field-mask-2">
															Phone <small class="text-warning">(999) 999-9999</small>
														</label>
														<div class="input-group">
															<span class="input-group-addon"> <i class="fa fa-phone"></i> </span>
															<input type="text" id="form-field-mask-2" class="form-control input-mask-phone">
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Product Key -A*-999-A999
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<label for="form-field-mask-3">
															Product Key <small class="text-error">A*-999-A999</small>
														</label>
														<div class="input-group">
															<input type="text" id="form-field-mask-3" class="form-control input-mask-product">
															<span class="input-group-addon"> <i class="fa fa-key"></i> </span>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: MASKED INPUT -->
						<!-- start: TEXT AREA -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Text <span class="text-bold">Area</span></h5>
									<p class="margin-bottom-30">
										The <code>&lt;textarea&gt;</code> tag defines a multi-line text input control.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Default
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<textarea placeholder="Default Text" id="form-field-22" class="form-control"></textarea>
													</div>
												</div>
											</div>
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														With Character Limit
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<textarea maxlength="50" id="form-field-23" class="form-control limited"></textarea>
													</div>
												</div>
											</div>
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														As a Block Note
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<div class="note-editor">
															<textarea class="form-control"></textarea>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Autosize with Animation
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<textarea class="form-control autosize area-animated"></textarea>
													</div>
												</div>
											</div>
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Autosize without Animation
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<textarea class="form-control autosize"></textarea>
													</div>
												</div>
											</div>
											<div class="panel panel-white">
												<div class="panel-heading">
													<div class="panel-title">
														Autosize As a Block Note
													</div>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<div class="note-editor">
															<textarea class="form-control autosize area-animated"></textarea>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: TEXT AREA -->
						<!-- start: DATE/TIME Picker -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Date/Time <span class="text-bold">Picker</span></h5>
									<p class="margin-bottom-30">
										A clean, flexible, and fully customizable date picker.
										User can navigate through months and years. The datepicker shows dates that come from other than the main month being displayed. These other dates are also selectable.
									</p>
									<div class="panel panel-white no-radius">
										<div class="panel-body">
											<div class="row">
												<div class="col-md-6">
													<h5 class="text-bold margin-top-25 margin-bottom-15">Inline</h5>
													<div class="datepicker"></div>
												</div>
												<div class="col-md-6">
													<h5 class="text-bold margin-top-25 margin-bottom-15">Input</h5>
													<div class="form-group">
														<input class="form-control datepicker" type="text">
													</div>
												</div>
												<div class="col-md-6">
													<h5 class="text-bold margin-top-25 margin-bottom-15">component</h5>
													<p class="input-group input-append datepicker date">
														<input type="text" class="form-control"/>
														<span class="input-group-btn">
															<button type="button" class="btn btn-default">
																<i class="glyphicon glyphicon-calendar"></i>
															</button> </span>
													</p>
													<h5 class="text-bold margin-top-25 margin-bottom-15">Format:</h5>
													<div class="form-group">
														<input class="form-control format-datepicker" type="text">
													</div>
												</div>
											</div>
											<div class="row">
												<div class="col-md-6">
													<h5 class="text-bold margin-top-25 margin-bottom-15">Timepicker</h5>
													<div class="form-group">
														<input type="text" id="timepicker-default" class="form-control">
													</div>
												</div>
												<div class="col-md-6">
													<h5 class="text-bold margin-top-25 margin-bottom-15">Date Range</h5>
													<div class="input-group input-daterange datepicker">
														<input type="text" class="form-control"/>
														<span class="input-group-addon bg-primary">to</span>
														<input type="text" class="form-control" />
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: DATE/TIME Picker -->
						<!-- start: SELECT BOXES -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Select <span class="text-bold">Box</span></h5>
									<p class="margin-bottom-30">
										The <code>&lt;select&gt;</code> element is used to create a drop-down list.
									</p>
									<div class="row">
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Default Select Boxes</span></h5>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<label for="form-field-select-1">
															Default
														</label>
														<select id="form-field-select-1" class="form-control">
															<option value="">&nbsp;</option>
															<option value="AL">Alabama</option>
															<option value="AK">Alaska</option>
															<option value="AZ">Arizona</option>
															<option value="AR">Arkansas</option>
															<option value="CA">California</option>
															<option value="CO">Colorado</option>
															<option value="CT">Connecticut</option>
															<option value="DE">Delaware</option>
															<option value="FL">Florida</option>
															<option value="GA">Georgia</option>
															<option value="HI">Hawaii</option>
															<option value="ID">Idaho</option>
															<option value="IL">Illinois</option>
															<option value="IN">Indiana</option>
															<option value="IA">Iowa</option>
															<option value="KS">Kansas</option>
															<option value="KY">Kentucky</option>
															<option value="LA">Louisiana</option>
															<option value="ME">Maine</option>
															<option value="MD">Maryland</option>
															<option value="MA">Massachusetts</option>
															<option value="MI">Michigan</option>
															<option value="MN">Minnesota</option>
															<option value="MS">Mississippi</option>
															<option value="MO">Missouri</option>
															<option value="MT">Montana</option>
															<option value="NE">Nebraska</option>
															<option value="NV">Nevada</option>
															<option value="NH">New Hampshire</option>
															<option value="NJ">New Jersey</option>
															<option value="NM">New Mexico</option>
															<option value="NY">New York</option>
															<option value="NC">North Carolina</option>
															<option value="ND">North Dakota</option>
															<option value="OH">Ohio</option>
															<option value="OK">Oklahoma</option>
															<option value="OR">Oregon</option>
															<option value="PA">Pennsylvania</option>
															<option value="RI">Rhode Island</option>
															<option value="SC">South Carolina</option>
															<option value="SD">South Dakota</option>
															<option value="TN">Tennessee</option>
															<option value="TX">Texas</option>
															<option value="UT">Utah</option>
															<option value="VT">Vermont</option>
															<option value="VA">Virginia</option>
															<option value="WA">Washington</option>
															<option value="WV">West Virginia</option>
															<option value="WI">Wisconsin</option>
															<option value="WY">Wyoming</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-1">
															Disabled
														</label>
														<select id="form-field-select-1" class="form-control" disabled>
															<option value="">&nbsp;</option>
															<option value="AL">Alabama</option>
															<option value="AK">Alaska</option>
															<option value="AZ">Arizona</option>
															<option value="AR">Arkansas</option>
															<option value="CA">California</option>
															<option value="CO">Colorado</option>
															<option value="CT">Connecticut</option>
															<option value="DE">Delaware</option>
															<option value="FL">Florida</option>
															<option value="GA">Georgia</option>
															<option value="HI">Hawaii</option>
															<option value="ID">Idaho</option>
															<option value="IL">Illinois</option>
															<option value="IN">Indiana</option>
															<option value="IA">Iowa</option>
															<option value="KS">Kansas</option>
															<option value="KY">Kentucky</option>
															<option value="LA">Louisiana</option>
															<option value="ME">Maine</option>
															<option value="MD">Maryland</option>
															<option value="MA">Massachusetts</option>
															<option value="MI">Michigan</option>
															<option value="MN">Minnesota</option>
															<option value="MS">Mississippi</option>
															<option value="MO">Missouri</option>
															<option value="MT">Montana</option>
															<option value="NE">Nebraska</option>
															<option value="NV">Nevada</option>
															<option value="NH">New Hampshire</option>
															<option value="NJ">New Jersey</option>
															<option value="NM">New Mexico</option>
															<option value="NY">New York</option>
															<option value="NC">North Carolina</option>
															<option value="ND">North Dakota</option>
															<option value="OH">Ohio</option>
															<option value="OK">Oklahoma</option>
															<option value="OR">Oregon</option>
															<option value="PA">Pennsylvania</option>
															<option value="RI">Rhode Island</option>
															<option value="SC">South Carolina</option>
															<option value="SD">South Dakota</option>
															<option value="TN">Tennessee</option>
															<option value="TX">Texas</option>
															<option value="UT">Utah</option>
															<option value="VT">Vermont</option>
															<option value="VA">Virginia</option>
															<option value="WA">Washington</option>
															<option value="WV">West Virginia</option>
															<option value="WI">Wisconsin</option>
															<option value="WY">Wyoming</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-2">
															Multiple
														</label>
														<select multiple="multiple" id="form-field-select-2" class="form-control">
															<option value="AL">Alabama</option>
															<option value="AK">Alaska</option>
															<option value="AZ">Arizona</option>
															<option value="AR">Arkansas</option>
															<option value="CA">California</option>
															<option value="CO">Colorado</option>
															<option value="CT">Connecticut</option>
															<option value="DE">Delaware</option>
															<option value="FL">Florida</option>
															<option value="GA">Georgia</option>
															<option value="HI">Hawaii</option>
															<option value="ID">Idaho</option>
															<option value="IL">Illinois</option>
															<option value="IN">Indiana</option>
															<option value="IA">Iowa</option>
															<option value="KS">Kansas</option>
															<option value="KY">Kentucky</option>
															<option value="LA">Louisiana</option>
															<option value="ME">Maine</option>
															<option value="MD">Maryland</option>
															<option value="MA">Massachusetts</option>
															<option value="MI">Michigan</option>
															<option value="MN">Minnesota</option>
															<option value="MS">Mississippi</option>
															<option value="MO">Missouri</option>
															<option value="MT">Montana</option>
															<option value="NE">Nebraska</option>
															<option value="NV">Nevada</option>
															<option value="NH">New Hampshire</option>
															<option value="NJ">New Jersey</option>
															<option value="NM">New Mexico</option>
															<option value="NY">New York</option>
															<option value="NC">North Carolina</option>
															<option value="ND">North Dakota</option>
															<option value="OH">Ohio</option>
															<option value="OK">Oklahoma</option>
															<option value="OR">Oregon</option>
															<option value="PA">Pennsylvania</option>
															<option value="RI">Rhode Island</option>
															<option value="SC">South Carolina</option>
															<option value="SD">South Dakota</option>
															<option value="TN">Tennessee</option>
															<option value="TX">Texas</option>
															<option value="UT">Utah</option>
															<option value="VT">Vermont</option>
															<option value="VA">Virginia</option>
															<option value="WA">Washington</option>
															<option value="WV">West Virginia</option>
															<option value="WI">Wisconsin</option>
															<option value="WY">Wyoming</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-2">
															Multiple Disabled
														</label>
														<select multiple="multiple" id="form-field-select-2" class="form-control" disabled>
															<option value="AL">Alabama</option>
															<option value="AK">Alaska</option>
															<option value="AZ">Arizona</option>
															<option value="AR">Arkansas</option>
															<option value="CA">California</option>
															<option value="CO">Colorado</option>
															<option value="CT">Connecticut</option>
															<option value="DE">Delaware</option>
															<option value="FL">Florida</option>
															<option value="GA">Georgia</option>
															<option value="HI">Hawaii</option>
															<option value="ID">Idaho</option>
															<option value="IL">Illinois</option>
															<option value="IN">Indiana</option>
															<option value="IA">Iowa</option>
															<option value="KS">Kansas</option>
															<option value="KY">Kentucky</option>
															<option value="LA">Louisiana</option>
															<option value="ME">Maine</option>
															<option value="MD">Maryland</option>
															<option value="MA">Massachusetts</option>
															<option value="MI">Michigan</option>
															<option value="MN">Minnesota</option>
															<option value="MS">Mississippi</option>
															<option value="MO">Missouri</option>
															<option value="MT">Montana</option>
															<option value="NE">Nebraska</option>
															<option value="NV">Nevada</option>
															<option value="NH">New Hampshire</option>
															<option value="NJ">New Jersey</option>
															<option value="NM">New Mexico</option>
															<option value="NY">New York</option>
															<option value="NC">North Carolina</option>
															<option value="ND">North Dakota</option>
															<option value="OH">Ohio</option>
															<option value="OK">Oklahoma</option>
															<option value="OR">Oregon</option>
															<option value="PA">Pennsylvania</option>
															<option value="RI">Rhode Island</option>
															<option value="SC">South Carolina</option>
															<option value="SD">South Dakota</option>
															<option value="TN">Tennessee</option>
															<option value="TX">Texas</option>
															<option value="UT">Utah</option>
															<option value="VT">Vermont</option>
															<option value="VA">Virginia</option>
															<option value="WA">Washington</option>
															<option value="WV">West Virginia</option>
															<option value="WI">Wisconsin</option>
															<option value="WY">Wyoming</option>
														</select>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<h5 class="panel-title">Css3 Select Boxes</h5>
												</div>
												<div class="panel-body">
													<div class="form-group">
														<label for="form-field-select-1">
															Skin Slide
														</label>
														<select class="cs-select cs-skin-slide">
															<option value=""></option>
															<option value="sightseeing">Sight Seeing</option>
															<option value="business">Business</option>
															<option value="honeymoon">Honeymoon</option>
															<option value="food">Gourmet</option>
															<option value="shopping">Shopping</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-1">
															Skin Slide with Icons
														</label>
														<select class="cs-select cs-skin-slide">
															<option value=""></option>
															<option value="sightseeing" data-class="fa fa-apple">Sight Seeing</option>
															<option value="business" data-class="fa fa-android">Business</option>
															<option value="honeymoon" data-class="fa fa-windows">Honeymoon</option>
															<option value="food" data-class="fa fa-dropbox">Gourmet</option>
															<option value="shopping" data-class="fa fa-github">Shopping</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-1">
															Skin Slide Disabled
														</label>
														<select class="cs-select cs-skin-slide" disabled>
															<option value=""></option>
															<option value="sightseeing">Sight Seeing</option>
															<option value="business">Business</option>
															<option value="honeymoon">Honeymoon</option>
															<option value="food">Gourmet</option>
															<option value="shopping">Shopping</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-2">
															Skin Elastic
														</label>
														<select class="cs-select cs-skin-elastic">
															<option value="" disabled selected>Select a Country</option>
															<option value="france">France</option>
															<option value="brazil">Brazil</option>
															<option value="argentina">Argentina</option>
															<option value="south-africa">South Africa</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-2">
															Skin Elastic with Icons
														</label>
														<select class="cs-select cs-skin-elastic">
															<option value="" disabled selected>Select a Country</option>
															<option value="france" data-class="fa fa-apple">France</option>
															<option value="brazil" data-class="fa fa-android">Brazil</option>
															<option value="argentina" data-class="fa fa-windows">Argentina</option>
															<option value="south-africa" data-class="fa fa-dropbox">South Africa</option>
															<option value="shopping" data-class="fa fa-github">Shopping</option>
														</select>
													</div>
													<div class="form-group">
														<label for="form-field-select-2">
															Skin Elastic Disabled
														</label>
														<select class="cs-select cs-skin-elastic" disabled>
															<option value="" disabled selected>Select a Country</option>
															<option value="france">France</option>
															<option value="brazil">Brazil</option>
															<option value="argentina">Argentina</option>
															<option value="south-africa">South Africa</option>
															<option value="shopping">Shopping</option>
														</select>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12">
											<h5 class="over-title">Select2</h5>
											<p>
												Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
											</p>
										</div>
										<form>
											<div class="col-sm-6">
												<div class="panel panel-transparent">
													<div class="panel-body">
														<div class="form-group">
															<label>
																The basics
															</label>
															<select class="js-example-basic-single js-states form-control">
																<optgroup label="Alaskan/Hawaiian Time Zone">
																	<option value="AK">Alaska</option>
																	<option value="HI">Hawaii</option>
																</optgroup>
																<optgroup label="Pacific Time Zone">
																	<option value="CA">California</option>
																	<option value="NV">Nevada</option>
																	<option value="OR">Oregon</option>
																	<option value="WA">Washington</option>
																</optgroup>
																<optgroup label="Mountain Time Zone">
																	<option value="AZ">Arizona</option>
																	<option value="CO">Colorado</option>
																	<option value="ID">Idaho</option>
																	<option value="MT">Montana</option>
																	<option value="NE">Nebraska</option>
																	<option value="NM">New Mexico</option>
																	<option value="ND">North Dakota</option>
																	<option value="UT">Utah</option>
																	<option value="WY">Wyoming</option>
																</optgroup>
																<optgroup label="Central Time Zone">
																	<option value="AL">Alabama</option>
																	<option value="AR">Arkansas</option>
																	<option value="IL">Illinois</option>
																	<option value="IA">Iowa</option>
																	<option value="KS">Kansas</option>
																	<option value="KY">Kentucky</option>
																	<option value="LA">Louisiana</option>
																	<option value="MN">Minnesota</option>
																	<option value="MS">Mississippi</option>
																	<option value="MO">Missouri</option>
																	<option value="OK">Oklahoma</option>
																	<option value="SD">South Dakota</option>
																	<option value="TX">Texas</option>
																	<option value="TN">Tennessee</option>
																	<option value="WI">Wisconsin</option>
																</optgroup>
																<optgroup label="Eastern Time Zone">
																	<option value="CT">Connecticut</option>
																	<option value="DE">Delaware</option>
																	<option value="FL">Florida</option>
																	<option value="GA">Georgia</option>
																	<option value="IN">Indiana</option>
																	<option value="ME">Maine</option>
																	<option value="MD">Maryland</option>
																	<option value="MA">Massachusetts</option>
																	<option value="MI">Michigan</option>
																	<option value="NH">New Hampshire</option>
																	<option value="NJ">New Jersey</option>
																	<option value="NY">New York</option>
																	<option value="NC">North Carolina</option>
																	<option value="OH">Ohio</option>
																	<option value="PA">Pennsylvania</option>
																	<option value="RI">Rhode Island</option>
																	<option value="SC">South Carolina</option>
																	<option value="VT">Vermont</option>
																	<option value="VA">Virginia</option>
																	<option value="WV">West Virginia</option>
																</optgroup>
															</select>
														</div>
														<div class="form-group">
															<label>
																Multiple select boxes
															</label>
															<select multiple="" class="js-example-basic-multiple js-states form-control">
																<optgroup label="Alaskan/Hawaiian Time Zone">
																	<option value="AK">Alaska</option>
																	<option value="HI">Hawaii</option>
																</optgroup>
																<optgroup label="Pacific Time Zone">
																	<option value="CA">California</option>
																	<option value="NV">Nevada</option>
																	<option value="OR">Oregon</option>
																	<option value="WA">Washington</option>
																</optgroup>
																<optgroup label="Mountain Time Zone">
																	<option value="AZ">Arizona</option>
																	<option value="CO">Colorado</option>
																	<option value="ID">Idaho</option>
																	<option value="MT">Montana</option>
																	<option value="NE">Nebraska</option>
																	<option value="NM">New Mexico</option>
																	<option value="ND">North Dakota</option>
																	<option value="UT">Utah</option>
																	<option value="WY">Wyoming</option>
																</optgroup>
																<optgroup label="Central Time Zone">
																	<option value="AL">Alabama</option>
																	<option value="AR">Arkansas</option>
																	<option value="IL">Illinois</option>
																	<option value="IA">Iowa</option>
																	<option value="KS">Kansas</option>
																	<option value="KY">Kentucky</option>
																	<option value="LA">Louisiana</option>
																	<option value="MN">Minnesota</option>
																	<option value="MS">Mississippi</option>
																	<option value="MO">Missouri</option>
																	<option value="OK">Oklahoma</option>
																	<option value="SD">South Dakota</option>
																	<option value="TX">Texas</option>
																	<option value="TN">Tennessee</option>
																	<option value="WI">Wisconsin</option>
																</optgroup>
																<optgroup label="Eastern Time Zone">
																	<option value="CT">Connecticut</option>
																	<option value="DE">Delaware</option>
																	<option value="FL">Florida</option>
																	<option value="GA">Georgia</option>
																	<option value="IN">Indiana</option>
																	<option value="ME">Maine</option>
																	<option value="MD">Maryland</option>
																	<option value="MA">Massachusetts</option>
																	<option value="MI">Michigan</option>
																	<option value="NH">New Hampshire</option>
																	<option value="NJ">New Jersey</option>
																	<option value="NY">New York</option>
																	<option value="NC">North Carolina</option>
																	<option value="OH">Ohio</option>
																	<option value="PA">Pennsylvania</option>
																	<option value="RI">Rhode Island</option>
																	<option value="SC">South Carolina</option>
																	<option value="VT">Vermont</option>
																	<option value="VA">Virginia</option>
																	<option value="WV">West Virginia</option>
																</optgroup>
															</select>
														</div>
														<div class="form-group">
															<label>
																Placeholders
															</label>
															<select class="js-example-placeholder-single js-states form-control">
																<option></option>
																<optgroup label="Alaskan/Hawaiian Time Zone">
																	<option value="AK">Alaska</option>
																	<option value="HI">Hawaii</option>
																</optgroup>
																<optgroup label="Pacific Time Zone">
																	<option value="CA">California</option>
																	<option value="NV">Nevada</option>
																	<option value="OR">Oregon</option>
																	<option value="WA">Washington</option>
																</optgroup>
																<optgroup label="Mountain Time Zone">
																	<option value="AZ">Arizona</option>
																	<option value="CO">Colorado</option>
																	<option value="ID">Idaho</option>
																	<option value="MT">Montana</option>
																	<option value="NE">Nebraska</option>
																	<option value="NM">New Mexico</option>
																	<option value="ND">North Dakota</option>
																	<option value="UT">Utah</option>
																	<option value="WY">Wyoming</option>
																</optgroup>
																<optgroup label="Central Time Zone">
																	<option value="AL">Alabama</option>
																	<option value="AR">Arkansas</option>
																	<option value="IL">Illinois</option>
																	<option value="IA">Iowa</option>
																	<option value="KS">Kansas</option>
																	<option value="KY">Kentucky</option>
																	<option value="LA">Louisiana</option>
																	<option value="MN">Minnesota</option>
																	<option value="MS">Mississippi</option>
																	<option value="MO">Missouri</option>
																	<option value="OK">Oklahoma</option>
																	<option value="SD">South Dakota</option>
																	<option value="TX">Texas</option>
																	<option value="TN">Tennessee</option>
																	<option value="WI">Wisconsin</option>
																</optgroup>
																<optgroup label="Eastern Time Zone">
																	<option value="CT">Connecticut</option>
																	<option value="DE">Delaware</option>
																	<option value="FL">Florida</option>
																	<option value="GA">Georgia</option>
																	<option value="IN">Indiana</option>
																	<option value="ME">Maine</option>
																	<option value="MD">Maryland</option>
																	<option value="MA">Massachusetts</option>
																	<option value="MI">Michigan</option>
																	<option value="NH">New Hampshire</option>
																	<option value="NJ">New Jersey</option>
																	<option value="NY">New York</option>
																	<option value="NC">North Carolina</option>
																	<option value="OH">Ohio</option>
																	<option value="PA">Pennsylvania</option>
																	<option value="RI">Rhode Island</option>
																	<option value="SC">South Carolina</option>
																	<option value="VT">Vermont</option>
																	<option value="VA">Virginia</option>
																	<option value="WV">West Virginia</option>
																</optgroup>
															</select>
														</div>
													</div>
												</div>
											</div>
											<div class="col-sm-6">
												<div class="panel panel-transparent">
													<div class="panel-body">
														<div class="form-group">
															<label>
																Loading array data
															</label>
															<select class="js-example-data-array-selected form-control"></select>
														</div>
														<div class="form-group">
															<label>
																Hiding the search box
															</label>
															<select class="js-example-basic-hide-search js-states form-control">
																<optgroup label="Alaskan/Hawaiian Time Zone">
																	<option value="AK">Alaska</option>
																	<option value="HI">Hawaii</option>
																</optgroup>
																<optgroup label="Pacific Time Zone">
																	<option value="CA">California</option>
																	<option value="NV">Nevada</option>
																	<option value="OR">Oregon</option>
																	<option value="WA">Washington</option>
																</optgroup>
																<optgroup label="Mountain Time Zone">
																	<option value="AZ">Arizona</option>
																	<option value="CO">Colorado</option>
																	<option value="ID">Idaho</option>
																	<option value="MT">Montana</option>
																	<option value="NE">Nebraska</option>
																	<option value="NM">New Mexico</option>
																	<option value="ND">North Dakota</option>
																	<option value="UT">Utah</option>
																	<option value="WY">Wyoming</option>
																</optgroup>
																<optgroup label="Central Time Zone">
																	<option value="AL">Alabama</option>
																	<option value="AR">Arkansas</option>
																	<option value="IL">Illinois</option>
																	<option value="IA">Iowa</option>
																	<option value="KS">Kansas</option>
																	<option value="KY">Kentucky</option>
																	<option value="LA">Louisiana</option>
																	<option value="MN">Minnesota</option>
																	<option value="MS">Mississippi</option>
																	<option value="MO">Missouri</option>
																	<option value="OK">Oklahoma</option>
																	<option value="SD">South Dakota</option>
																	<option value="TX">Texas</option>
																	<option value="TN">Tennessee</option>
																	<option value="WI">Wisconsin</option>
																</optgroup>
																<optgroup label="Eastern Time Zone">
																	<option value="CT">Connecticut</option>
																	<option value="DE">Delaware</option>
																	<option value="FL">Florida</option>
																	<option value="GA">Georgia</option>
																	<option value="IN">Indiana</option>
																	<option value="ME">Maine</option>
																	<option value="MD">Maryland</option>
																	<option value="MA">Massachusetts</option>
																	<option value="MI">Michigan</option>
																	<option value="NH">New Hampshire</option>
																	<option value="NJ">New Jersey</option>
																	<option value="NY">New York</option>
																	<option value="NC">North Carolina</option>
																	<option value="OH">Ohio</option>
																	<option value="PA">Pennsylvania</option>
																	<option value="RI">Rhode Island</option>
																	<option value="SC">South Carolina</option>
																	<option value="VT">Vermont</option>
																	<option value="VA">Virginia</option>
																	<option value="WV">West Virginia</option>
																</optgroup>
															</select>
														</div>
														<div class="form-group">
															<label>
																Disabled mode
															</label>
															<select class="js-example-disabled js-states form-control" disabled>
																<optgroup label="Alaskan/Hawaiian Time Zone">
																	<option value="AK">Alaska</option>
																	<option value="HI">Hawaii</option>
																</optgroup>
																<optgroup label="Pacific Time Zone">
																	<option value="CA">California</option>
																	<option value="NV">Nevada</option>
																	<option value="OR">Oregon</option>
																	<option value="WA">Washington</option>
																</optgroup>
																<optgroup label="Mountain Time Zone">
																	<option value="AZ">Arizona</option>
																	<option value="CO">Colorado</option>
																	<option value="ID">Idaho</option>
																	<option value="MT">Montana</option>
																	<option value="NE">Nebraska</option>
																	<option value="NM">New Mexico</option>
																	<option value="ND">North Dakota</option>
																	<option value="UT">Utah</option>
																	<option value="WY">Wyoming</option>
																</optgroup>
																<optgroup label="Central Time Zone">
																	<option value="AL">Alabama</option>
																	<option value="AR">Arkansas</option>
																	<option value="IL">Illinois</option>
																	<option value="IA">Iowa</option>
																	<option value="KS">Kansas</option>
																	<option value="KY">Kentucky</option>
																	<option value="LA">Louisiana</option>
																	<option value="MN">Minnesota</option>
																	<option value="MS">Mississippi</option>
																	<option value="MO">Missouri</option>
																	<option value="OK">Oklahoma</option>
																	<option value="SD">South Dakota</option>
																	<option value="TX">Texas</option>
																	<option value="TN">Tennessee</option>
																	<option value="WI">Wisconsin</option>
																</optgroup>
																<optgroup label="Eastern Time Zone">
																	<option value="CT">Connecticut</option>
																	<option value="DE">Delaware</option>
																	<option value="FL">Florida</option>
																	<option value="GA">Georgia</option>
																	<option value="IN">Indiana</option>
																	<option value="ME">Maine</option>
																	<option value="MD">Maryland</option>
																	<option value="MA">Massachusetts</option>
																	<option value="MI">Michigan</option>
																	<option value="NH">New Hampshire</option>
																	<option value="NJ">New Jersey</option>
																	<option value="NY">New York</option>
																	<option value="NC">North Carolina</option>
																	<option value="OH">Ohio</option>
																	<option value="PA">Pennsylvania</option>
																	<option value="RI">Rhode Island</option>
																	<option value="SC">South Carolina</option>
																	<option value="VT">Vermont</option>
																	<option value="VA">Virginia</option>
																	<option value="WV">West Virginia</option>
																</optgroup>
															</select>
														</div>
													</div>
												</div>
											</div>
										</form>
									</div>
								</div>
							</div>
						</div>
						<!-- end: SELECT BOXES -->
						<!-- start: INPUT SPINNER -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title">Input <span class="text-bold">Spinner</span></h5>
									<p class="margin-bottom-30">
										A mobile and touch friendly input spinner component for Bootstrap. It supports the mousewheel and the up/down keys.
									</p>
									<div class="row">
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white min-height-270">
												<div class="panel-heading">
													<div class="panel-title">
														Basic example
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														The init value is set on the input with the <code>value</code> attribute.
													</p>
													<div class="form-group">
														<label>
															Example:
														</label>
														<input id="demo1" type="text" value="55" name="demo1" touchspin data-min="0" data-max="100" data-step="0.1" data-decimals="2" data-boostat="5" data-maxboostedstep="10">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white min-height-270">
												<div class="panel-heading">
													<div class="panel-title">
														Example with postfix
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Use the <code>data-postfix</code> attribute to add a postfix.
													</p>
													<div class="form-group">
														<label>
															Example with postfix:
														</label>
														<input id="demo1" type="text" value="55" name="demo1" touchspin data-min="0" data-max="100" data-step="0.1" data-decimals="2" data-boostat="5" data-maxboostedstep="10" data-postfix="%">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white min-height-270">
												<div class="panel-heading">
													<div class="panel-title">
														With prefix
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Use the <code>data-prefix</code> attribute to add a prefix.
													</p>
													<div class="form-group">
														<label>
															With prefix
														</label>
														<input id="demo1" type="text" value="0" name="demo1" touchspin data-min="-1000000000" data-max="1000000000" data-stepinterval="50" data-maxboostedstep="10000000" data-prefix="$">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white min-height-270">
												<div class="panel-heading">
													<div class="panel-title">
														Vertical buttons
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Set the <code>data-verticalbuttons</code> attribute as <code>true</code>.
														You can also specify the class for icons.
													</p>
													<div class="form-group">
														<label>
															Vertical buttons with custom icons
														</label>
														<input id="demo4" type="text" value="0" name="demo4" touchspin data-verticalbuttons="true" data-verticalupclass="ti-angle-up" data-verticaldownclass="ti-angle-down">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white min-height-270">
												<div class="panel-heading">
													<div class="panel-title">
														Button postfix
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Set the <code>data-postfix</code> attribute as <code>button</code>.
														You can also specify the class for the button.
													</p>
													<div class="form-group">
														<label>
															Button postfix
														</label>
														<input id="demo5" type="text" value="0" name="demo5" touchspin data-postfix="button" data-postfix_extraclass="btn btn-default">
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-white min-height-270">
												<div class="panel-heading">
													<div class="panel-title">
														Sizes
													</div>
												</div>
												<div class="panel-body">
													<p class="margin-bottom-30">
														Size of the whole controller can be set with applying input-sm or input-lg class on the input
													</p>
													<div class="form-group">
														<label>
															Button postfix (large)
														</label>
														<input id="demo6" type="text" value="0" name="demo6" class="form-control input-lg" touchspin data-postfix="button" data-postfix_extraclass="btn btn-default">
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: INPUT SPINNER -->
					</div>
				</div>
			</div>
			<!-- start: FOOTER -->
			<footer>
				<div class="footer-inner">
					<div class="pull-right">
						&copy; <span class="current-year"></span><span class="text-bold text-uppercase">ClipTheme</span>. <span>All rights reserved</span>
					</div>
					<div class="pull-left">
						<span class="go-top"><i class="ti-angle-up"></i></span>
					</div>
				</div>
			</footer>
			<!-- end: FOOTER -->
			<!-- start: OFF-SIDEBAR -->
			<div id="off-sidebar" class="sidebar">
				<div class="sidebar-wrapper">
					<ul class="nav nav-tabs nav-justified">
						<li class="active">
							<a href="#off-users" aria-controls="off-users" role="tab" data-toggle="tab">
								<i class="ti-comments"></i>
							</a>
						</li>
						<li>
							<a href="#off-favorites" aria-controls="off-favorites" role="tab" data-toggle="tab">
								<i class="ti-heart"></i>
							</a>
						</li>
						<li>
							<a href="#off-settings" aria-controls="off-settings" role="tab" data-toggle="tab">
								<i class="ti-settings"></i>
							</a>
						</li>
					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active" id="off-users">
							<div id="users" toggleable active-class="chat-open">
								<div class="users-list">
									<div class="sidebar-content perfect-scrollbar">
										<h5 class="sidebar-title">On-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-3.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
										<h5 class="sidebar-title">Off-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-8.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-9.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="user-chat">
									<div class="chat-content">
										<div class="sidebar-content perfect-scrollbar">
											<a class="sidebar-back pull-left" href="#" data-toggle-class="chat-open" data-toggle-target="#users"><i class="ti-angle-left"></i> <span>Back</span></a>
											<ol class="discussion">
												<li class="messages-date">
													Sunday, Feb 9, 12:58
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, Nicole
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How are you?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Hi, i am good
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Glad to see you ;)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 13:10
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															What do you think about my new Dashboard?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 15:28
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Alo...
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Are you there?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, i am here
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Your Dashboard is great
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Friday, Feb 7, 23:39
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How does the binding and digesting work in AngularJS?, Peter?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															oh that's your question?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															little reduntant, no?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															literally we get the question daily
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															I know. I, however, am not a nerd, and want to know
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															for this type of question, wouldn't it be better to try Google?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Lucky for us :)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
											</ol>
										</div>
									</div>
									<div class="message-bar">
										<div class="message-inner">
											<a class="link icon-only" href="#"><i class="fa fa-camera"></i></a>
											<div class="message-area">
												<textarea placeholder="Message"></textarea>
											</div>
											<a class="link" href="#">
												Send
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-favorites">
							<div class="users-list">
								<div class="sidebar-content perfect-scrollbar">
									<h5 class="sidebar-title">Favorites</h5>
									<ul class="media-list">
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Nicole Bell</h4>
													<span> Content Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<div class="user-label">
													<span class="label label-success">3</span>
												</div>
												<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Steven Thompson</h4>
													<span> Visual Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-settings">
							<div class="sidebar-content perfect-scrollbar">
								<h5 class="sidebar-title">General Settings</h5>
								<ul class="media-list">
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Enable Notifications</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show your E-mail</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show Offline Users</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">E-mail Alerts</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">SMS Alerts</span>
										</div>
									</li>
								</ul>
								<div class="save-options">
									<button class="btn btn-success">
										<i class="icon-settings"></i><span>Save Changes</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end: OFF-SIDEBAR -->
			<!-- start: SETTINGS -->
			<div class="settings panel panel-default hidden-xs hidden-sm" id="settings">
				<button ct-toggle="toggle" data-toggle-class="active" data-toggle-target="#settings" class="btn btn-default">
					<i class="fa fa-spin fa-gear"></i>
				</button>
				<div class="panel-heading">
					Style Selector
				</div>
				<div class="panel-body">
					<!-- start: FIXED HEADER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left"> Fixed header</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-header" />
						</span>
					</div>
					<!-- end: FIXED HEADER -->
					<!-- start: FIXED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-sidebar" />
						</span>
					</div>
					<!-- end: FIXED SIDEBAR -->
					<!-- start: CLOSED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Closed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="closed-sidebar" />
						</span>
					</div>
					<!-- end: CLOSED SIDEBAR -->
					<!-- start: FIXED FOOTER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed footer</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-footer" />
						</span>
					</div>
					<!-- end: FIXED FOOTER -->
					<!-- start: THEME SWITCHER -->
					<div class="colors-row setting-box">
						<div class="color-theme theme-1">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-1">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-2">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-2">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-3">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-3">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-4">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-4">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-5">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-5">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-6">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-6">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<!-- end: THEME SWITCHER -->
				</div>
			</div>
			<!-- end: SETTINGS -->
		</div>
		<!-- start: MAIN JAVASCRIPTS -->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="vendor/modernizr/modernizr.js"></script>
		<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
		<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
		<script src="vendor/switchery/switchery.min.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script src="vendor/maskedinput/jquery.maskedinput.min.js"></script>
		<script src="vendor/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
		<script src="vendor/autosize/autosize.min.js"></script>
		<script src="vendor/selectFx/classie.js"></script>
		<script src="vendor/selectFx/selectFx.js"></script>
		<script src="vendor/select2/select2.min.js"></script>
		<script src="vendor/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
		<script src="vendor/bootstrap-timepicker/bootstrap-timepicker.min.js"></script>
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<!-- start: CLIP-TWO JAVASCRIPTS -->
		<script src="assets/js/main.js"></script>
		<!-- start: JavaScript Event Handlers for this page -->
		<script src="assets/js/form-elements.js"></script>
		<script>
			jQuery(document).ready(function() {
				Main.init();
				FormElements.init();
			});
		</script>
		<!-- end: JavaScript Event Handlers for this page -->
		<!-- end: CLIP-TWO JAVASCRIPTS -->
	</body>
</html>
